<!-- 头部 -->
<template>
  <div class="header">
    <div class="header_container">
      <div class="h_one">
        <!-- 展示折叠图标 -->
        <i :class="isImg ?'el-icon-s-unfold img': 'el-icon-s-fold img'" @click="up()"></i>
        <!-- 标签 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in $route.meta.title" :key="index">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 文字滚动 -->
      <!-- <div class="text" :style="'width:' + lwidth + 'px'">
        <Scroll :lists="list" :lwidth="lwidth" class="scrollContainer"></Scroll>
      </div> -->
      <div class="right">
        <!-- 刷新 -->
        <div class="btn-fullscreen" @click="refresh">
          <el-tooltip effect="dark" content="刷新" placement="bottom">
            <i class="el-icon-refresh-left"></i>
          </el-tooltip>
        </div>
        <!-- 全屏事件 -->
        <div class="btn-fullscreen" @click="handleFullScreen">
          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
            <i class="el-icon-rank"></i>
          </el-tooltip>
        </div>
        <!-- 个人 -->
        <el-dropdown>
          <img src="../assets/img/avator.jpg" class="avator" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>{{real_name}}</el-dropdown-item>
            <el-dropdown-item>
              <span @click="quit" class="quit">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 历史导航 -->
    <div class="nav">
      <div class="history_left">
        <el-tag
          v-for="tag in tags"
          :key="tag.text"
          closable
          :type="tag.type"
          @close="handleClose(tag)"
          @click="skip(tag)"
        >{{tag.text}}</el-tag>
      </div>
      <!-- 关闭标签选项 -->
      <div class="history_right">
        <el-dropdown slot="dropdown" @command="tag" placement="bottom-start">
          <i class="el-icon-caret-bottom history"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">关闭当前标签页</el-dropdown-item>
            <el-dropdown-item command="b">关闭其他标签页</el-dropdown-item>
            <el-dropdown-item command="c">关闭全部标签页</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
// import Scroll from "./scroll";
export default {
  inject: ["reload"],
  props: {
    tags: {
      type: Array
    }
  },
  data() {
    return {
      fullscreen: false, //全局事件
      list: "连雨不知春去", //滚动信息
      lwidth: 1200, //文字滚动适配宽
      real_name: "", //用户名
      isCollapse: false, //点击折叠版面
      isImg: false
    };
  },
  created() {
    // this.webSocket(); //推送消息
    setInterval(() => {
      let a = "wosfdsjkbdansd";
      this.list = a;
    }, 8000);
    setInterval(() => {
      let a = "1111111111111111";
      this.list = a;
    }, 10000);
    setInterval(() => {
      let a = "333333333333333333";
      this.list = a;
    }, 15000);
    var myself = JSON.parse(localStorage.getItem("myself"));
    console.log(myself);
    if (myself.real_name != "" && myself.real_name != undefined) {
      this.real_name = myself.real_name;
    } else {
      this.real_name = myself.account;
    }
  },
  // components: { Scroll },
  methods: {
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    //点击刷新
    refresh() {
      // 刷新单页面
      this.reload();
    },
    //推送
    // webSocket() {
    //   const that = this;
    //   if (typeof WebSocket == "undefined") {
    //     this.$notify({
    //       title: "提示",
    //       message: "当前浏览器无法接收实时报警信息，请切换浏览器！",
    //       type: "warning",
    //       duration: 0
    //     });
    //   } else {
    //     // 获取token保存到vuex中的用户信息，此处仅适用于本项目，注意删除或修改
    //     // 实例化socket，这里我把用户名传给了后台，使后台能判断要把消息发给哪个用户，其实也可以后台直接获取用户IP来判断并推送
    //     const socketUrl = "ws://localhost:3000/";
    //     var websocket = new WebSocket(socketUrl);
    //     // 监听socket打开
    //     websocket.onopen = function() {
    //       console.log("浏览器WebSocket已打开");
    //       websocket.send(1);
    //     };
    //     // 监听socket关闭
    //     websocket.onclose = function() {
    //       console.log("WebSocket已关闭");
    //     };
    //     // 监听socket消息接收
    //     websocket.onmessage = function(res) {
    //       // 转换为json对象
    //       let data = JSON.parse(res.data);
    //       console.log(data.text);
    //       that.list.push(data.text);
    //       console.log(that.list);
    //       // that.$notify({
    //       //   title: "建立连接",
    //       //   // 这里也可以把返回信息加入到message中显示
    //       //   message: "实时推送消息连接成功，点击查看报警信息详情",
    //       //   type: "success",
    //       //   duration: 0,
    //       //   onClick: () => {
    //       //     that.$router.push({
    //       //       path: "/alarmManage/monitAlarmInfo"
    //       //     });
    //       //   }
    //       // });
    //     };
    //     // 监听socket错误
    //     websocket.onerror = function() {
    //       that.$notify({
    //         title: "错误",
    //         message: "服务器错误，无法接收实时推送信息",
    //         type: "error",
    //         duration: 0
    //       });
    //     };
    //   }
    // },
    //提出登录
    quit() {
      this.$api
        .Logout({})
        .then(res => {
          // console.log(res);
          if (res.code == 10005) {
            this.$message({
              message: res.message,
              type: "success",
              duration: 1500
            });
            //退出成功，清除所有缓存
            localStorage.clear();
            //返回登录页面
            this.$router.replace("/");
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 点击伸缩菜单栏
    up() {
      this.isCollapse = !this.isCollapse;
      this.isImg = !this.isImg;
      this.$emit("isCollapse", { isCollapse: this.isCollapse });
    },
    //点击关闭标签
    tag(e) {
      console.log(e);
      //删除当前页面
      if (e == "a") {
        for (let i = 0; i < this.tags.length; i++) {
          if (this.tags[i].path == this.$route.path) {
            if (this.$route.path == "/manage") {
              this.$message({
                message: "首页不可删除哦！",
                type: "warning"
              });
            } else {
              this.tags.splice(i, 1); //删除当前页面
              this.$router.go(-1); //删除当前页面，返回上个页面
            }
          }
        }
      } else if (e == "b") {
        let indexs = 0;
        for (let i = 0; i < this.tags.length; i++) {
          if (this.tags[i].path == this.$route.path) {
            indexs = i;
          }
        }
        let b_tags = [];
        if (indexs == 0) {
           b_tags = [this.tags[0]];
        } else {
           b_tags = [this.tags[0], this.tags[indexs]];
        }
        this.tags = b_tags;
      } else {
        // 关闭全部标签返回登录页，通过判断token实现效果
        this.$router.push("/"); //回到首页
      }
    },
    //删除标签
    handleClose(e) {
      let index = this.tags.indexOf(e);
      if (index == 0) {
        this.$message({
          message: "首页不可删除哦！",
          type: "warning"
        });
      } else {
        this.tags.splice(index, 1);
      }
      // this.$delete(this.tags,index);
    },
    //点击导航跳转路由
    skip(e) {
      let index = this.tags.indexOf(e);
      this.$router.push(e.path);
      this.tags.forEach(e => {
        e.type = "";
      });
      this.tags[index].type = "success";
    }
  },
  computed: {
    clientWidth() {
      return this.$store.getters.cwidth; //当前页面宽度
    }
  },
  watch: {
    clientWidth(newval) {
      console.log(newval);
      //监听页面宽度
      if (newval >= 1770) {
        this.lwidth = 1200;
      } else if (newval <= 1770 && newval > 1550) {
        this.lwidth = 1000;
      } else if (newval <= 1550 && newval > 1380) {
        this.lwidth = 800;
      } else if (newval <= 1380 && newval > 1160) {
        this.lwidth = 600;
      } else if (newval <= 1160 && newval > 830) {
        this.lwidth = 400;
      } else if (newval <= 830 && newval > 580) {
        this.lwidth = 200;
      } else if (newval <= 580) {
        this.lwidth = 100;
      } else {
        this.lwidth = 1200;
      }
    }
  }
};
</script>

<style scoped>
.header_container {
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
  height: 60px;
  background: #fff;
  align-items: center;
  border-bottom: 1px solid #eff2f7;
}
.h_one {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 4%;
}
.avator {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 20px;
}
.quit {
  display: block;
  width: 100%;
}
.right {
  display: flex;
  height: 60px;
  width: 10%;
  align-items: center;
  justify-content: space-around;
}
.btn-fullscreen i {
  font-size: 140%;
}
/* .text {
  width: 1500px;
} */
.scrollContainer {
  /* color: red; */
  font-size: 16px;
  margin-left: 10px;
  width: 100%;
  height: 30px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  line-height: 30px;
  overflow: hidden;
  color: red;
}
.img {
  font-size: 20px;
  margin-right: 10px;
}
.nav {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
}
.history {
  font-size: 20px;
}
.history_left {
  display: flex;
  width: 90%;
  overflow-x: auto;
}
.history_right {
  min-width: 3%;
  overflow-y: auto;
  display: flex;
  justify-content: center;
}
.nav .el-tag {
  cursor: pointer;
  margin-left: 3px;
}
</style>
